<template>
<div>
  <el-form :model="currentMapElementData">
    <el-form-item label="名称" :label-width="formLabelWidth">
      <el-input v-model="currentMapElementData.label" auto-complete="off" size="small"></el-input>
    </el-form-item>
    <el-form-item label="类型" :label-width="formLabelWidth">
      <!-- <el-input v-model="currentMapElementData.elementtypeName" size="small" :disabled="true"></el-input> -->
      <el-select v-model="currentMapElementData.elementtypeName" size="small" class="select" disabled>
        <el-option v-for="element in mapelementtypes" :key="element.id"
          :label="element.name"
          :value="element.id">
        </el-option>
      </el-select>

    </el-form-item>
    <el-form-item label="图标" :label-width="formLabelWidth">
      <el-form :model="currentMapElementData">
        <el-row class="row-pos">
          <el-col :span="2"><div class="grid-content bg-purple label-color">默认</el-input></div></el-col>
          <el-col :span="22">
            <el-select v-model="currentMapElementData.iconid_off" placeholder="默认" style="width:100%;margin:0 4px;" size="small">
              <el-option v-for="(iconItem, iconId) in sysIcons" :key="iconId"
                :label="iconItem.name"
                :value="iconId">
                <img :src="getImgDataStr(iconItem)" width="20px" height="20px"></img>
                <span style="float: right; color: #8492a6; font-size: 13px">{{iconItem.name}}</span>
              </el-option>
            </el-select>
          </el-col>
        </el-row>
        <el-row class="row-pos">
          <el-col :span="2"><div class="grid-content bg-purple label-color">问题</el-input></div></el-col>
          <el-col :span="22">
            <el-select v-model="currentMapElementData.iconid_on" placeholder="默认" style="width:100%;margin:0 4px;" size="small">
              <el-option v-for="(iconItem, iconId) in sysIcons" :key="iconId"
                :label="iconItem.name"
                :value="iconId">
                <img :src="getImgDataStr(iconItem)" width="20px" height="20px"></img>
                <span style="float: right; color: #8492a6; font-size: 13px">{{iconItem.name}}</span>
              </el-option>
            </el-select>
          </el-col>
        </el-row>
        <el-row class="row-pos">
          <el-col :span="2"><div class="grid-content bg-purple label-color">维护</el-input></div></el-col>
          <el-col :span="22">
            <el-select v-model="currentMapElementData.iconid_maintenance" placeholder="默认" style="width:100%;margin:0 4px;" size="small">
              <el-option v-for="(iconItem, iconId) in sysIcons" :key="iconId"
                :label="iconItem.name"
                :value="iconId">
                <img :src="getImgDataStr(iconItem)"  width="20px" height="20px"></img>
                <span style="float: right; color: #8492a6; font-size: 13px">{{iconItem.name}}</span>
              </el-option>
            </el-select>
          </el-col>
        </el-row>
        <el-row class="row-pos">
          <el-col :span="2"><div class="grid-content bg-purple label-color">停用</el-input></div></el-col>
          <el-col :span="22">
            <el-select v-model="currentMapElementData.iconid_disabled" placeholder="默认" style="width:100%;margin:0 4px;" size="small">
              <el-option v-for="(iconItem, iconId) in sysIcons" :key="iconId"
                :label="iconItem.name"
                :value="iconId">
                <img :src="getImgDataStr(iconItem)"  width="20px" height="20px"></img>
                <span style="float: right; color: #8492a6; font-size: 13px">{{iconItem.name}}</span>
              </el-option>
            </el-select>
          </el-col>
        </el-row>
      </el-form>
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button type="success" @click="modifyhost">{{$t('OK')}}</el-button>
    <el-button type="danger" @click="cancelModify">{{$t('Cancel')}}</el-button>
  </div>
</div>
</template>

<script>
import {MAPELEMENTTYPES} from 'common/resTypeEnum'
import topoApi from 'api/topo'
import addTopoEle from 'common/topo/addTopoElement'
import eventHubs from 'common/eventHubs'
export default {
  props: {
    currentMapElementData: {
      style: Object,
      default: function() {
        return {}
      }
    }
  },
  data() {
    return {
      formLabelWidth: '50px',
      mapelementtypes: MAPELEMENTTYPES,
    }
  },
  methods: {
    modifyhost() {
      const self = this;
      const newHostData = this.currentMapElementData;
      if (!this.isElementChange(newHostData, this.$store.state.topo.curMapElement)) {
        this.$message({type:'info',message:'数据未发生改变!'})
        return;
      }
      let elementList = [];
      elementList.push(newHostData);

      topoApi.updateMap(newHostData.sysmapid, elementList).then(response => {
        if (response.data) {
          // 更新数据
          self.$store.dispatch('setCurMapElement', newHostData);
          self.updateEleStyle(newHostData);
          self.$message({type:'success',message: self.$t('modified Successfully')});
        } else {
          self.$message({type:'error',message: self.$t('Failed to modify')})
        }
      });
    },
    cancelModify() {
      this.$emit('transferCloseDialog', this.$t('Cancel to modify'));
    },
    isElementChange(oldE, newE) {
      if (oldE.label == newE.label && oldE.iconid_off == newE.iconid_off &&
        oldE.iconid_on == newE.iconid_on && oldE.iconid_maintenance == newE.iconid_maintenance &&
        oldE.iconid_disabled == newE.iconid_disabled) {
          return false;
      }
      return true;
    },
    isObjBlank(obj) {
      return (obj === null) || (obj === undefined) || (obj === '');
    },
    updateEleStyle(element) {
      this.$emit('transferModifiedNode', {newIcon:this.sysIcons[element.iconid_off], modifiedNode: element});
    },
    getImgDataStr(item) {
      if (item.imageformat) {
        return 'data:'+ item.imageformat +';base64,'+item.image;
      }
      return 'data:image/png;base64,'+item.image;
    }
  },
  computed: {
    sysIcons() {
      return this.$store.state.topo.sysIcons;
    }
  }
}
</script>
<style scoped>
  .select {
    width: 100%;
  }
</style>
